<template>
  <div class="container">
    <el-row type="flex" align="middle" justify="space-between">
      <!--移动端-->
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px">
        <el-button type="primary" icon="el-icon-s-unfold" plain size="small" @click="drawer = true"></el-button>
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up text-center" style="line-height: 60px">
        {{ nav_config?.name }}
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px;">
        <template v-if="isLogin">
          <el-row type="flex" align="middle" justify="end">
            <div @click="goLink('/user/' + userInfo.userId)">
              <el-avatar style="position: relative;top: 7px;"
                         icon="el-icon-user-solid"
                         :size="30"
                         :src="(userInfo.avatar == null) ? '': runtimeConfig.public.API_BASE + userInfo.avatar"></el-avatar>
            </div>
          </el-row>
        </template>
        <template v-else>
          <el-button type="primary" plain size="small" style="float: right" @click="goLink('/login')">登录</el-button>
        </template>
      </el-col>
      <!--PC端-->
      <el-col class="hidden-xs-only hidden-sm-only" :span="3" style="line-height:60px;">
        {{ nav_config?.name }}
      </el-col>
      <el-col class="hidden-xs-only hidden-sm-only" :span="15" v-if="menuList.length > 0">
        <ClientOnly>
          <el-menu :default-active="activeIndex.toString()" mode="horizontal" active-text-color="#409EFF">
            <template v-for="(item,index) in menuList">
              <el-menu-item v-if="!item.list" :index="index + ''" @click="goLink(item.menuUrl)">{{ item.menuName }}</el-menu-item>
              <el-sub-menu v-else :index="index + ''">
                <template #title>{{ item.name }}</template>
                <el-menu-item :index="index + '-' + i" @click="goLink(j.menuUrl)" v-for="(j,i) in item.list" :key="i">{{ j.menuName }}</el-menu-item>
              </el-sub-menu>
            </template>
          </el-menu>
        </ClientOnly>
      </el-col>
      <el-col class="hidden-xs-only hidden-sm-only" :span="6">
        <template v-if="isLogin">
          <el-dropdown class="pointer" style="float: right;">
            <span class="el-dropdown-link">
              <a :href="userUrl">
                <el-row class="fs-14" type="flex" align="middle" justify="end">
                  <div>
                    {{ (userInfo.nickName === null || userInfo.nickName === '') ? userInfo.userName : userInfo.nickName }}&nbsp;
                  </div>
                  <div>
                    <el-avatar icon="el-icon-user-solid" :size="30" :src="(userInfo.avatar == null) ? '': runtimeConfig.public.API_BASE + userInfo.avatar"></el-avatar>
                  </div>
                </el-row>
              </a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="logout">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <el-row v-else class="fs-14" type="flex" align="middle" justify="end">
          <div>
            <NuxtLink to="/login">登录</NuxtLink>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <!--移动端抽屉导航-->
    <el-drawer
        :title="nav_config.name"
        v-model="drawer"
        size="60%"
        direction="ltr"
        @open="drawerOpen"
        @close="drawerClose">
      <el-menu :default-active="activeIndex.toString()" active-text-color="#409EFF">
        <template v-for="(item,index) in menuList">
          <el-menu-item v-if="!item.list" :index="index + ''" @click="goLink(item.menuUrl)">{{ item.menuName }}</el-menu-item>
          <el-sub-menu v-else :index="index + ''">
            <template slot="title">{{ item.name }}</template>
            <el-menu-item :index="index + '-' + i" @click="goLink(j.menuUrl)" v-for="(j,i) in item.list" :key="i">{{ j.menuName }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
      <el-row class="text-center mg-t-20" type="flex" justify="space-between" align="middle" style="flex-wrap: wrap;">
        <el-col v-if="isLogin">
          <NuxtLink :to="'/user/' + userInfo.userId">
            <el-row type="flex" align="middle" justify="center">
              <div>
                <el-avatar icon="el-icon-user-solid" :size="30" :src="(userInfo.avatar == null) ? '': runtimeConfig.public.API_BASE + userInfo.avatar"></el-avatar>&nbsp;
              </div>
              <div>
                {{ (userInfo.nickName === null || userInfo.nickName === '') ? userInfo.userName : userInfo.nickName }}
              </div>
            </el-row>
          </NuxtLink>
        </el-col>
        <el-col v-else>
          <NuxtLink to="/login">
            <el-button class="sm-width-96" type="primary" round>登录</el-button>
          </NuxtLink>
        </el-col>
        <el-col v-if="isLogin" class="mg-t-10">
          <el-button type="primary" round @click="logout" size="small">退出登录</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import {
  ElRow,
  ElButton,
  ElCol,
  ElAvatar,
  ElDropdown,
  ElMenu,
  ElMenuItem,
  ElDropdownMenu,
  ElDropdownItem,
  ElSubMenu,
  ElDrawer,
} from "element-plus";
import modal from "@/plugins/modal";
import {SymbolKind} from "vscode-languageserver-types";
import Array = SymbolKind.Array;
// SEO优化
useHead({
  title: '首页',
  meta: [
    { name: 'description', content: 'XXX导航' },
    { name: 'keywords', content: '关键字,关键字' }
  ]
});
// 获取配置信息
const runtimeConfig = useRuntimeConfig();
// 选中的索引
let activeIndex = ref("-1");
// 前往用户中心的url：防止用户信息还未加载出来，用户就去点击
const userUrl = ref("javascript:;");
// 移动端抽屉导航
const drawer = ref(false);
// 菜单列表
const menuList = useMenuList();
// 站点配置
const nav_config = useConfig();
// 登录状态
const isLogin = useIsLogin();
// 用户信息
const userInfo = useUserInfo();
// 路由观测
const router = useRouter();
// 获取API接口
const {menuApi} = useApi();

// 获取菜单列表
menuApi.getList().then(res => {
  if (res.code === 200) {
    const arr = res.data;
    let newsList = {
      name: "更多",
      list: [] as any[]
    };
    let newsMenuList:any = [];
    for (let i = 0; i < arr.length; i++) {
      if ((i + 1) > 6) {
        newsList.list.push(arr[i]);
      } else {
        newsMenuList.push(arr[i]);
      }
    }
    if (newsList.list.length > 0) {
      newsMenuList.push(newsList);
    }
    menuList.value = newsMenuList;
  } else {
    modal.msgError(res.msg);
  }
});

// 监听当前路由
watch(
    () => router.currentRoute.value,
    (route: any) => {
      let find = false;
      menuList.value.map((item:any, index) => {
        if (route.path.indexOf(item.menuUrl) !== -1) {
          activeIndex.value = index + '';
          find = true;
        }
        if (item.list) {
          item.list.map((items: { menuUrl: string; }, i: string) => {
            if (route.path.indexOf(items.menuUrl) !== -1) {
              activeIndex.value = index + '-' + i;
              find = true;
            }
          })
        }
      });
      if (!find) {
        activeIndex.value = '-1';
      }
    },
    {immediate: true}
);

const drawerOpen = () => {
  const body = document.querySelector("body");
  if (body) {
    body.style.padding = "0";
  }
};
const drawerClose = () => {
  const body = document.querySelector("body");
  if (body) {
    body.style.removeProperty("padding");
  }
}
</script>

<style scoped>
  .el-menu .is-active{
    background-color: #ecf5ff;
  }
  .el-menu.el-menu--horizontal{
    border: none
  }
</style>